<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-09-27 16:48:55
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-22 15:45:18
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-27 16:48:55
-->
<template>
  <view :class="classNames" :style="style">
    <view class="arco-tag-icon">
      <slot name="icon"></slot>
    </view>
    <slot></slot>
    <text
      v-if="closable"
      class="arco-icon-hover arco-tag-icon-hover arco-tag-close-btn"
      @click="handleClose"
    >
      <text class="arco-icon iconfont icon-guanbi1"></text>
    </text>
  </view>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from "vue";
import { TAG_COLORS } from "./interface";
const icon = defineComponent({
  name: "Card",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    color: {
      type: String,
      default: void 0,
    },
    size: {
      type: String,
      default: "medium",
    },
    bordered: {
      type: Boolean,
      default: false,
    },
    closable: {
      type: Boolean,
      default: false,
    },
    visible: {
      type: Boolean,
      default: void 0,
    },
    defaultVisible: {
      type: Boolean,
      default: true,
    },
    checkable: {
      type: Boolean,
      default: false,
    },
    checked: {
      type: Boolean,
      default: void 0,
    },
    defaultChecked: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["update:visible", "update:checked", "close", "check"],
  setup(props, ctx) {
    const prefixCls = "arco-tag";
    const flog = ref(false);

    const _visible = ref(props.defaultVisible);

    const _checked = ref(props.defaultChecked);

    const isBuiltInColor = computed(
      () => props.color && TAG_COLORS.includes(props.color),
    );
    const isCustomColor = computed(
      () => props.color && !TAG_COLORS.includes(props.color),
    );

    const computedVisible = computed(() => {
      var _a;
      return (_a = props.visible) != null ? _a : _visible.value;
    });

    const computedChecked = computed(() => {
      var _a;
      return props.checkable
        ? (_a = props.checked) != null
          ? _a
          : _checked.value
        : true;
    });

    const classNames = computed(() => {
      return [
        prefixCls,
        `${prefixCls}-size-${props.size}`,
        {
          [`${prefixCls}-hide`]: !computedVisible.value,
          [`${prefixCls}-${props.color}`]: isBuiltInColor.value,
          [`${prefixCls}-bordered`]: props.bordered,
          [`${prefixCls}-checked`]: computedChecked.value,
          [`${prefixCls}-custom-color`]: isCustomColor.value,
        },
      ];
    });

    const style = computed(() => {
      if (isCustomColor.value) {
        return {
          backgroundColor: props.color,
        };
      }
      return void 0;
    });

    /**
     * 关闭按钮
     */
    const handleClose = (ev: Event) => {
      _visible.value = false;
      ctx.emit("update:visible", false);
      ctx.emit("close", ev);
    };

    function show() {
      flog.value = !flog.value;
    }

    return {
      classNames,
      flog,
      show,
      style,
      handleClose,
    };
  },
});
export default icon;
</script>

<style scoped lang="scss">
@import "./index.scss";

.arco-icon {
  font-size: 14px;
  vertical-align: middle;
}

.arco-tag-icon {
  font-size: 14px;
  vertical-align: middle;
}
</style>
